@charset "utf-8";
@import"commom/rest";
@function n($px) {
    @return $px/2;
}
img {
    width: 100%;
}

.da{
    .wezi {
        margin: 0 auto;
        padding-top: n(106px);
        width: n(496px);
        @extend img;
    }
    .piao_box {
        position: relative;
        .piao {
            margin: 0 auto;
            width: n(208px);
            height: n(308px);
            @extend img;
            margin-top: n(100px);
        }
        .hulu {
            margin: 0 auto;
            position: absolute;
            top: n(-48px);
            left: n(310px);
            width: n(128px);
            height: n(166px);
            @extend img;
        }
        .yunz {
            width: n(108px);
            height: n(78px);
            @extend img;
            position: absolute;
            top: n(144px);
            left: n(30px);
            -webkit-animation: nyunc 5s linear 2s infinite alternate;
            @-webkit-keyframes nyunc {
                0% {
                    top: n(144px);
                    left: n(30px);
                }
                25% {
                    top: n(144px);
                    left: n(200px);
                }
                75% {
                    top: n(144px);
                    left: n(400px);
                }
                85% {
                    top: n(144px);
                    left: n(550px);
                }
                100% {
                    top: n(144px);
                    left: n(640px);
                }
            }
        }
        .yunx {
            position: absolute;
            top: n(104px);
            left: n(460px);
            width: n(64px);
            height: n(47px);
            @extend img;
            -webkit-animation: nyunv 5s linear 2s infinite alternate;
            @-webkit-keyframes nyunv {
                0% {
                    top: n(104px);
                    left: n(224px);
                }
                25% {
                    top: 0;
                    left: 0;
                }
                75% {
                    top: n(144px);
                    left: n(400px);
                }
                100% {
                    top: n(144px);
                    left: n(640px);
                }
            }
        }
        .yunc {
            position: absolute;
            top: n(136px);
            right: n(158px);
            width: n(64px);
            height: n(47px);
            @extend img;
            -webkit-animation: nyunn 5s linear 2s infinite alternate;
            @-webkit-keyframes nyunn {
                0% {
                    top: n(136px);
                    right: n(158px);
                }
                25% {
                    top: 0;
                    right: n(158px);
                }
                75% {
                    top: n(136px);
                    right: n(158px);
                }
                100% {
                    top: n(136px);
                    right: n(158px);
                }
            }
        }
        .yunv {
            position: absolute;
            top: 0;
            right: 0;
            width: n(78px);
            height: n(80px);
            @extend img
        }
    }
    
    
    
    
}
@media only screen and (max-height:555.5px) {
.da .wezi {
    padding-top: 15px;
    width: 228px;
}
.da .piao_box .piao {
    width: 104px;
    height: 154px;
    margin-top: 37px;
}
.da .piao_box .hulu {
    left: 128px;
    width: 60px;
}

}

@media only screen and (min-height:556px) and (max-height:591px) {
    .da .wezi {
    padding-top: 27px;
}
.da .piao_box .piao {
    margin-top: 38px;
}
.da .bottom_bottom .bottom_b {
    margin-top: 17px;}
    .da .piao_box .hulu {
    left: 130px;
    }
    .da .bottom_bottom {
    margin-top: 36px;
}

}
